$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    height: 100vh;
    position: relative;

    .bg {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      background: #F9F6F1;
      top: 50%;

      svg {
        display: block;
        height: 100vh;
        width: 100%;
        object-fit: cover;
      }
    }

    .text {
      position: absolute;
      left: 81/$f+vw;
      top: 50%;
      transform: translateY(-50%);

      .p1 {
        color: #000;
        font-size: 52/$f+vw;
        font-weight: 700;
        margin-bottom: 50/$f+vw;
      }

      .box {
        border-radius: 0px 0px 52/$f+vw 0px;
        background: rgba(0, 57, 130, 0.04);
        backdrop-filter: blur(10/$f+vw);
        border-left: 4/$f+vw solid #003982;
        padding: 24/$f+vw 27/$f+vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 599/$f+vw;

        .tag {
          width: 31%;
          display: flex;
          align-items: center;
          color: rgba(0, 0, 0, 0.53);
          font-weight: 200;
          font-size: 28/$f+vw;
          margin-bottom: 26/$f+vw;

          &::before {
            content: '';
            display: block;
            width: 8/$f+vw;
            height: 8/$f+vw;
            background: #003982;
            margin-right: 10/$f+vw;
          }
        }

        .tag:nth-child(7),
        .tag:nth-child(8),
        .tag:nth-child(9) {
          margin-bottom: 0;
        }
      }
    }

    .news {
      position: absolute;
      right: 0;
      bottom: 50/$f+vw;
      width: 500/$f+vw;

      .swiper-container {
        width: 100%;

        a {
          display: block;
          background-color: white;

          .pic {
            overflow: hidden;

            img {
              width: 100%;
              display: block;
              transition: all 600ms;
              object-fit: cover;
              height: 230/$f+vw;
            }
          }

          .info {
            margin: 12/$f+vw 22/$f+vw;

            .p1 {
              color: #000;
              font-size: 18/$f+vw;
              font-weight: 200;
              // transition: all 600ms;
              &:hover{
                color: #003982;
                font-weight: bold;
              }
            }

            .more {
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-top: 1px solid #434343;
              margin-top: 20/$f+vw;
              padding: 10/$f+vw 0 19/$f+vw 0;

              p {
                color: #000;
                font-size: 18/$f+vw;
                font-weight: 200;
                &:hover{
                  text-decoration: underline;
                }
              }

              svg {
                width: 11/$f+vw;
                display: block;
                &:hover{
                  line,path{
                    stroke: #003982;
                  }
                }
              }
            }
          }

          &:hover {
            .pic {
              img {
                transform: scale(1.05);
              }
            }
          }
        }
      }

      .swiper-pagination {
        position: absolute;
        left: 0;
        top: -20px;

        .swiper-pagination-bullet {
          width: 10/$f+vw;
          height: 8/$f+vw;
          transform: skew(-10deg);
          border-radius: 0;
          opacity: 1;
          margin: 0 2/$f+vw;
          background-color: #D6D6D6;
          transition: all 600ms;
        }
        .swiper-pagination-bullet-active{
          background-color: #003982;
        }
      }
    }
    .foot_copy {
      display: flex;
      justify-content: space-between;
      position: absolute;
      left: 0;
      padding: 0 81/$f+vw;
      bottom: 30/$f+vw;
      width: 100%;
      z-index: 10;
      .l {
        color: #000;
        font-size: 14/$f+vw;
  
        a {
          color: #000;
          transition: all 600ms;
          &:hover{
            text-decoration: underline;
         }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    // padding-top: 60px;
    .banner{
      .text{
        left: 5%;
        top:38%;
        .p1{
          font-size: 18px;
          margin-bottom: 20px;
        }
        .box{
          width: 300px;
          padding: 20px;
          background: rgba(251,251,251,1);
          .tag{
            font-size: 14px;
            margin-bottom: 10px;
          }
        }
      }
      .news{
        bottom:6%;
        width: 95%;
        .swiper-container{
          a{
            .pic{
              img{
                height: 150px;
              }
            }
            .info{
              margin: 8px 15px;
              .p1{
                font-size: 14px;
              }
              .more{
                margin-top: 10px;
                padding: 5px 0 10px 0;
                p{
                  font-size:14px;
                }
                svg{
                  width: 10px;
                }
              }
            }
          }
        }
        .swiper-pagination{
          .swiper-pagination-bullet{
            width: 10px;
            height: 10px;
            margin: 0 2px;
          }
        }
      }
      .foot_copy{
        padding: 0 5%;
        .l{
          font-size: 12px;
          a{
            display: block;
          }
        }
      }
    }
  }
}